<template>
  <div class="play-box">
    <!-- 进度条 -->
    <div class="play-top">
      <el-slider v-model="value1" @change="changeCurrentTime"></el-slider>
    </div>

    <!-- 歌曲信息以及播放暂停按钮 -->
    <div class="play-bottom flex">
      <div class="left flex">
        <img src="@/assets/logo.png" alt="" v-if="musicDetails == 1" />
        <img :src="musicDetails.al.picUrl" alt="" v-else />
        <div class="artist-song">
          <div v-if="musicDetails == 1" class="artistsong">歌手-歌名</div>
          <div v-else class="artistsong">
            {{ musicDetails.ar[0].name }}-{{ musicDetails.name }}
          </div>
          <div v-if="musicDetails == 1">00:00/00:00</div>
          <div v-else>
            {{ currentTime | timeFormat }}/{{ musicDuraion | timeFormat }}
          </div>
        </div>
        <div class="btn-box flex">
          <div><i class="el-icon-star-off"></i></div>
          <div><i class="el-icon-download"></i></div>
          <div><i class="el-icon-s-comment"></i></div>
        </div>
      </div>
      <div class="middle flex">
        <div class="prev">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="play">
          <i
            :class="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"
            class="icon"
            @click="handleClick"
          ></i>
        </div>
        <div class="next">
          <i class="el-icon-arrow-right"></i>
        </div>
        <!-- 通过动态绑定autoplay实现防止发生播放状态和播放按钮不匹配的问题 -->
        <audio
          :src="mp3Url"
          ref="audio"
          :autoplay="isPlaying"
          :loop="isLoop"
          @ended="handleEnded"
          @timeupdate="handleTimeUpdate"
          @loadstart="loadStart"
		  @play="handlePlay"
        ></audio>
      </div>
      <div class="right flex">
        <div class="volum">
          <el-slider
            v-model="voiceVolumn"
            vertical
            height="200px"
            @input="handleVolumn"
          ></el-slider>
          <i class="el-icon-mic"></i>
        </div>
        <div class="speed">倍速</div>
        <div class="quality">音质</div>
        <div class="playways" @click="handleLoop">
          <div class="tip" ref="playways">{{ playwaysMessage }}</div>
          <i class="el-icon-refresh"></i>
        </div>
        <div class="playlist">播放列表</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { dateFormat, timeFormat } from "@/common/filter";
export default {
  name: "Play",
  data() {
    return {
      imgUrl: "@/assets/logo.png",
      isPlaying: false,
      value1: 0,
      currentTime: 0,
      isLoop: false,
      voiceVolumn: 50,
      playwaysMessage: "单次播放模式",
	  musicDuraion: 0
    };
  },
  computed: {
    ...mapState(["mp3Url", "musicDetails"]),
  },
  watch: {
    mp3Url(val) {
      this.isPlaying = true;
      //   console.log(val);
    },
  },
  created() {
    //   this.currentTime = 0
  },
  mounted() {
    // this.currentTime = 0;
  },
  methods: {
    loadStart() {
      this.currentTime = 0;
    },
    changeCurrentTime(val) {
      //   console.log(val);
      var duration = this.$refs.audio.duration;
      this.$refs.audio.currentTime = (val / 100) * duration;
    },
    handleClick() {
      // console.log(this.$refs.audio.paused)
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.isPlaying = true;
      } else {
        this.$refs.audio.pause();
        this.isPlaying = false;
      }
    },
    //音乐播放结束时出发时间
    handleEnded() {
      this.isPlaying = false;
    },
    //音乐播放进度条变化时触发,由currentTime改变触发
    handleTimeUpdate() {
      let nowTime;
      let oldTime = this.currentTime || 0;
      nowTime = this.$refs.audio.currentTime;
      this.currentTime = nowTime > oldTime ? nowTime : oldTime;
      let duration = this.$refs.audio.duration;
      this.value1 = Math.ceil((nowTime / duration) * 100);
    },
    //改变播放方式（是否循环）
    handleLoop() {
      this.isLoop = !this.isLoop;
      if (this.isLoop) {
        console.log("循环播放模式");
        this.playwaysMessage = "循环播放模式";
      } else {
        console.log("单次播放模式");
        this.playwaysMessage = "单次播放模式";
      }
      this.$refs.playways.className = "tip visible";
      //   this.$refs.playways.style.visibility = 'visible';
      //   setTimeout(()=>{
      //       this.$refs.playways.style.visibility = 'hidden';
      //   },1500)
      setTimeout(() => {
        this.$refs.playways.className = "tip";
      }, 1500);
    },
    //改变音量
    handleVolumn(val) {
      this.$refs.audio.volume = val / 100;
    },
	handlePlay(){
		// console.log("play")
		this.musicDuraion = this.$refs.audio.duration;
	}
  },
  filters: {
    dateFormat,
    timeFormat,
  },
};
</script>

<style scoped lang="less">
.play-box {
  height: 60px;
  width: 100%;
  background-color: skyblue;
  position: relative;
  .play-top {
    position: absolute;
    width: 100%;
    z-index: 1;
    top: -20px;
    left: 0px;
  }
  .play-bottom {
    padding-top: 5px;
    height: 60px;
    .left {
      height: 100%;
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        margin-left: 5px;
      }
      .artist-song {
        width: 140px;
        height: 30px;
        margin-right: 5px;
        .artistsong {
          height: 20px;
          line-height: 20px;
          overflow-x: auto;
          overflow-y: hidden;
          text-overflow: ellipsis;
        }
      }
      .btn-box {
        height: 100%;
        line-height: 60px;
        div {
          margin-right: 10px;
        }
      }
    }
    // 播放部分
    .middle {
      width: 150px;
      height: 100%;
      margin-left: 30px;
      margin-right: 0;
      line-height: 60px;
      .play {
        .icon {
          width: 36px;
          height: 36px;
          font-size: 36px;
        }
      }
      .prev {
        .el-icon-arrow-left {
          width: 36px;
          height: 36px;
          font-size: 36px;
        }
      }
      .next {
        .el-icon-arrow-right {
          width: 36px;
          height: 36px;
          font-size: 36px;
        }
      }
    }
    .right {
      width: 400px;
      height: 100%;
      .playways {
        width: 40px;
        height: 40px;
        margin-top: 5px;
        position: relative;
        .el-icon-refresh {
          width: 30px;
          height: 30px;
          font-size: 30px;
        }
        .tip {
          width: 100px;
          height: 20px;
          font-size: 14px;
          line-height: 20px;
          color: gray;
          position: absolute;
          left: -25px;
          bottom: -5px;
        //   transition: visibility 1s ease-in-out;
          visibility: hidden;
        }
        .visible {
          visibility: visible;
        }
      }

      .volum {
        width: 40px;
        position: relative;
        .el-slider {
          position: absolute;
          left: 9px;
          bottom: 40px;
          z-index: 10;
          visibility: hidden;
        }
        .el-icon-mic {
          position: absolute;
          bottom: 20px;
          left: 50%;
        }
      }
      .volum:hover {
        .el-slider {
          visibility: visible;
        }
      }

      .speed {
        width: 40px;
        height: 30px;
        margin-top: 10px;
        line-height: 30px;
      }
      .quality {
        width: 40px;
        height: 30px;
        margin-top: 10px;
        line-height: 30px;
      }
      .playlist {
        width: 80px;
        height: 30px;
        margin-top: 10px;
        line-height: 30px;
      }
    }
  }
}
</style>